<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>表格</title>
    <style type="text/css">
        body {margin: 0; background-color: rgb(85,155,90);}
        h1 {font-family: "微软雅黑", sans-serif;}
        #main {text-align: center; padding:	100px 0; color:white;}
        #myform {display: block; width:300px; margin: 0 auto;}
        .table {display: table; width: 100%;}
        .row {display: table-row; height:50px; text-align: left;}
        .row .des {display: table-cell; width:40%;}
        .row .content {display: table-cell; width:60%;}
        .flex-input {width: 90%; height: 24px; border: none; outline: none; text-indent: 1em;}
        .bottom {text-align: center;}
        .bottom button {padding: 6px 15px;}
    </style>
</head>
<body>
<div id="main">
<form id="myform">
<h1>兴趣爱好</h1>
<div class="table">
<div class="row">
	<label class="des" for="mystar">喜欢的明星：</label>
    <div class="content">
	<input id="mystar" list="stars" class="flex-input">
	<datalist id="stars">
		<option value="周杰伦">
		<option value="梁静茹">
		<option value="蔡依林">
		<option value="萧亚轩">
		<option value="王力宏">
		<option value="潘玮柏">
	</datalist>
    </div>
</div>
<div class="row">
	<label class="des" for="mygame">喜欢的游戏：</label>
    <div class="content">
	<input id="mygame" list="games" class="flex-input">
	<datalist id="games">
		<option value="终极火力">
		<option value="反恐精英">
		<option value="魔兽争霸">
		<option value="拳皇">
		<option value="极品飞车">
		<option value="古墓丽影">
	</datalist>
    </div>
</div>
<div class="row">
	<label class="des" for="mycar">喜欢的汽车：</label>
    <div class="content">
	<input id="mycar" list="cars" class="flex-input">
	<datalist id="cars">
		<option value="福特">
		<option value="宝马">
		<option value="奔驰">
		<option value="吉利">
		<option value="大众">
		<option value="兰博基尼">
	</datalist>
    </div>
</div>
</div>
<div class="bottom">
    <button type="submit">确认</button>
</div>
</form>
</div>
</body>
</html>
